<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<style>
  .div_cal {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, 1fr);
    width: 500px;
    height: auto;
  }

  .p_cal {
    display: block;
    width: 500px;
    margin: 0;
    height: 80px;
    padding: 0;
    border: 1px solid black;
    text-align: right;
    font-size: 40px;
  }

  input {
    font-size: 40px;
  }
</style>

<body>
  <div>
    <p class="p_cal"></p>
  </div>
  <div class="div_cal" id="cal">
    <input type="button" value="MC" style="height: 80px; color: rgb(167, 169, 171);"></input>
    <input type="button" value="M+" style="color: rgb(167, 169, 171);"></input>
    <input type="button" value="M-" style="color: rgb(167, 169, 171);"></input>
    <input type="button" value="MR" style="color: rgb(167, 169, 171);"></input>
    <input type="button" value="C" style="color: rgb(0, 47, 255);"></input>
    <input type="button" value="/" style="color: rgb(0, 47, 255);"></input>
    <input type="button" value="*" style="color: rgb(0, 47, 255);"></input>
    <input type="button" value="del" style="color: rgb(0, 47, 255);"></input>
    <input type="button" value="7"></input>
    <input type="button" value="8"></input>
    <input type="button" value="9"></input>
    <input type="button" value="-"></input>
    <input type="button" value="4"></input>
    <input type="button" value="5"></input>
    <input type="button" value="6"></input>
    <input type="button" value="+"></input>
    <input type="button" value="1"></input>
    <input type="button" value="2"></input>
    <input type="button" value="3"></input>
    <input type="button" value="=" style="background-color: rgb(0, 115, 255); color: white;"></input>
    <input type="button" value="%"></input>
    <input type="button" value="0"></input>
    <input type="button" value="."></input>
  </div>
</body>

<script>
  let cal = document.getElementById("cal");
  let p_cal = document.querySelector(".p_cal");
  let memory = 0;
  //利用flag标志位清空结果框，每次计算完成后将flag置0，此时如果
  let flag = 1;

  cal.onclick = function (e) {
    let target = e.target;
    let value = target.value;
    //解决非按钮点击事件
    if (value == undefined) return;
    // 判断是否为计算结果
    if (flag == 0) {
      p_cal.innerText = '0';
      flag = 1;
    }
    switch (value) {
      case "=":
        p_cal.innerText = eval(p_cal.innerText); //计算
        flag = 0; //标记此次为计算结果
        break;
      case "del":
        p_cal.innerText = p_cal.innerText.slice(0, -1);
        if (p_cal.innerText == "") p_cal.innerText = "0";
        break;
      case "C":
        p_cal.innerText = "0"
        break;
      case "MC":
        memory = ''; //清空存储的数据
        break;
      case "MR":
        p_cal.innerText = memory; //取出存储的数据
        break;
      case "M+":
        memory += eval(p_cal.innerText); //将存储的数据加上输入框数据
        break;
      case "M-":
        memory -= eval(p_cal.innerText); //将存储的数据减去输入框数据
        break;
      default:
        //解决运算符号开头
        if (p_cal.innerText == "0") {
          if (value == "%" || value == "+" || value == "-" || value == "*" || value == "/") return;
          else if (value == '.') //0后可以跟.
          {
            p_cal.innerText += target.value;
            return;
          }
          p_cal.innerText = "";
        }
        //解决重复输入运算符
        let i = p_cal.innerText.slice(-1); //获取最后一个字符
        if (i == "%" || i == "+" || i == "-" || i == "*" || i == "/" || i == ".") {
          if (value == "%" || value == "." || value == "+" || value == "-" || value == "*" || value == "/") return;
          else p_cal.innerText += target.value;
        }
        else p_cal.innerText += target.value;
    }
  }
</script>

</html>